<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-button-group class="ml-4">
      <el-popover
      v-for="item in buttonConfigs" :key="item.id"
    placement="top-start"
    :title='item.hover.title'
    :width="200"
    :disabled="!item.hover"
    trigger="hover"
    :content='item.hover.content'
  >
  <template #reference>
    <el-button
          :type="item.type"
          @click="buttonGroupChange(item)"
          :icon="item.icon"
          :disabled="item.disable"
          :class = "{ activeClass: useActiveStyle && handleButtonId == item.id }"
          >
          {{ item.label }}
        </el-button>
  </template>
</el-popover>
    </el-button-group>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch, shallowRef } from 'vue';
import type { ButtonGroupStructure } from '.';
// import { ElIcon } from 'element-plus';
const propsConfig = defineProps<{buttonConfigs: ButtonGroupStructure[] , isActiveStyle : boolean}>();
const handleButtonId = ref<string>('');
const useActiveStyle = shallowRef<boolean>(true);
const emits = defineEmits(['clickCallBack']);
const buttonGroupChange = (item : ButtonGroupStructure) =>{
    //如果当前按钮已被选择，重复选择时不做回调
   if(item.id && handleButtonId && item.id == handleButtonId.value){
    console.error("Button has already actived , do not double click with the same action. Thank you !")
   }
   else{
    handleActiveClass(item.id);
    emits('clickCallBack', item);
   }
}
const handleActiveClass = (id : string)=>{
  if(useActiveStyle.value == true){
  //如果配置中开启了 点击状态
  handleButtonId.value = id;
  }
}
const buttonViewsConfig = ref<ButtonGroupStructure[]>([]);
watch(
      [
    () => propsConfig.buttonConfigs,
    () => propsConfig.isActiveStyle
  ],
    async (buttonConfigsVal, useActiveStyleVal) => {
    if(useActiveStyleVal){
      useActiveStyle.value = propsConfig.isActiveStyle;
    }
    if (buttonConfigsVal) {
      if(propsConfig.buttonConfigs){
        buttonViewsConfig.value = propsConfig.buttonConfigs ;
        if(useActiveStyle.value){
          buttonViewsConfig.value.map(item=>{
            if(item.defaultActiveId){
              handleButtonId.value = item.id;
              return;
            }
          })
        }
      }
    }
  },
  { deep: true, immediate: true }
);
</script>


<style scoped>
.activeClass{
  background-color:#f1edf0;
  color : #714B67
}
</style>
